import React from 'react';
import { Route, Routes, Navigate } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router-dom';
import { SubPageLayout } from '../components';
import {
  SafetyCertificateOutlined,
  HomeOutlined,
  FileAddOutlined,
  DatabaseOutlined,
  SyncOutlined,
  MonitorOutlined,
  CloudUploadOutlined,
} from '@ant-design/icons';

// 证书中心子页面
import CertificateHome from '../views/certificates/CertificateHome';
import CertificateApply from '../views/certificates/CertificateApply';
import CertificateManage from '../views/certificates/CertificateManage';
import CertificateDeploy from '../views/certificates/CertificateDeploy';
import CertificateMonitor from '../views/certificates/CertificateMonitor';

const CertificatesRouter: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  // 侧边栏菜单配置
  const menuItems = [
    {
      key: '/app/certificates',
      icon: <HomeOutlined />,
      label: '首页',
    },
    {
      key: '/app/certificates/apply',
      icon: <FileAddOutlined />,
      label: '申请证书',
    },
    {
      key: '/app/certificates/manage',
      icon: <DatabaseOutlined />,
      label: '证书管理',
    },
    {
      key: '/app/certificates/deploy',
      icon: <CloudUploadOutlined />,
      label: '证书部署',
    },
    {
      key: '/app/certificates/monitor',
      icon: <MonitorOutlined />,
      label: '证书监控',
    },
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  return (
    <SubPageLayout
      menuItems={menuItems}
      selectedKeys={[location.pathname]}
      onMenuClick={handleMenuClick}
      defaultCollapsed={false}
    >
      <Routes>
        {/* 证书中心首页 */}
        <Route index element={<CertificateHome />} />
        
        {/* 申请证书 */}
        <Route path="apply" element={<CertificateApply />} />
        
        {/* 证书管理 */}
        <Route path="manage" element={<CertificateManage />} />
        
        {/* 证书部署 */}
        <Route path="deploy" element={<CertificateDeploy />} />
        
        {/* 证书监控 */}
        <Route path="monitor" element={<CertificateMonitor />} />

        {/* 兼容旧路由 - 重定向到新路由 */}
        <Route path="auto-deploy" element={<Navigate to="/app/certificates/deploy" replace />} />
        
        {/* 其他未匹配的路由重定向到首页 */}
        <Route path="*" element={<Navigate to="/app/certificates" replace />} />
      </Routes>
    </SubPageLayout>
  );
};

export default CertificatesRouter; 